<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ol's attributes</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../js/lib/bootstrap/dist/css/bootstrap.min.css">
  <style>
    h2 {
      color: crimson;
    }  
  </style>
</head>
<body>

	<div class="container">
    <h1>ol 的 type 属性</h1>
    <h2>数字: type="1"</h2>
    <ol type="1">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ol>
    <h2>大写英文字母: type="A"</h2>
    <ol type="A">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ol>
    <h2>大写英文字母: type="a"</h2>
    <ol type="a">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ol>
    <h2>大写罗马字母: type="I"</h2>
    <ol type="I">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ol>
    <h2>小写罗马字母: type="i"</h2>
    <ol type="i">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ol>                     
  </div>

  <div class="container">
    <h1>ol 的 start 属性</h1>
    <h2>大写罗马字母: type="I", start="5"</h2>
    <ol type="I" start="5">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ol>      
  </div>

  <div class="container">
    <h1>ol 的 value 属性</h1>
    <h2>小写罗马字母: type="i", value="5"</h2>
    <ol type="i">
      <li value="5">Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ol>      
  </div>

  <div class="container">
    <h1>ol 的 reversed 属性</h1>
    <h2>小写英文字母: type="a", reversed</h2>
    <ol type="a" reversed>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
    </ol>      
  </div>    

  <script src="../../js/lib/jquery/dist/jquery.min.js"></script>
  <script src="../../js/lib/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>